<!-- 首页 -->
<template>
  <div class="container home-wrapper">
    <!-- 顶部 card  -->
    <top-panel
      class="row-container"
      :baseData="baseData"
    />
    <!-- 波浪动画 -->
    <div class="dashboard-wave">
      <svg viewBox="0 0 500 40" preserveAspectRatio="none" style="width:100%;height:40px;">
        <path d="M0,20 Q125,40 250,20 T500,20 V40 H0Z" fill="#e6f9f6">
          <animate attributeName="d" dur="3s" repeatCount="indefinite"
            values="
              M0,20 Q125,40 250,20 T500,20 V40 H0Z;
              M0,20 Q125,0 250,20 T500,20 V40 H0Z;
              M0,20 Q125,40 250,20 T500,20 V40 H0Z
            " />
        </path>
      </svg>
    </div>
    <!-- 中部图表  -->
    <MiddleChart class="row-container"></MiddleChart>
    <!-- 列表排名 -->
    <rank-list class="row-container" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import TopPanel from './components/TopPanel.vue';
import MiddleChart from './components/MiddleChart.vue';
import RankList from './components/RankList.vue';
import { getUserProfile } from '@/api/system/user';

const baseData = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
}); // 用户信息
const roleListData = ref(''); // 角色
const getpersonalData = async () => {
  const res = await getUserProfile();
  baseData.user = res.data;
  baseData.roleGroup = res.roleGroup;
  baseData.postGroup = res.postGroup;
};
const quotes = [
  '关爱每一位长者，让幸福常伴身边。',
  '用心服务，用爱陪伴，守护每一天。',
  '健康养老，智慧管理，温暖你我他。',
  '让家属更安心，让老人更舒心。'
]
const currentQuote = ref(0)
const statCards = [
  {
    title: '本月新增老人',
    value: 23,
    desc: '环比增长 15%',
    bg: 'linear-gradient(135deg,#e6f9f6,#b2f2e9)',
    icon: '👴'
  },
  {
    title: '本月服务单',
    value: 120,
    desc: '环比增长 8%',
    bg: 'linear-gradient(135deg,#f7fcfa,#c3e6ff)',
    icon: '📝'
  },
  {
    title: '本月满意度',
    value: '98%',
    desc: '持续高位',
    bg: 'linear-gradient(135deg,#fffbe6,#ffe7ba)',
    icon: '😊'
  },
  {
    title: '活跃家属数',
    value: 56,
    desc: '环比增长 10%',
    bg: 'linear-gradient(135deg,#f0f5ff,#adc6ff)',
    icon: '👨‍👩‍👧‍👦'
  }
]
onMounted(() => {
  getpersonalData();
  setInterval(() => {
    currentQuote.value = (currentQuote.value + 1) % quotes.length
  }, 3500)
});
</script>
<style lang="scss" src="./index.scss"></style>
<style scoped>
.row-container:not(:last-child) {
  margin-bottom: 16px;
}
:deep(.el-card__body) {
  padding-top: 0 !important;
}
:deep(a) {
  cursor: pointer;
}
:deep(a:active) {
  color: #1c55cf;
}
:deep(a:hover) {
  color: rgba(0, 97, 253, 0.8);
}
</style>
